CSS - animation-iteration-count
animation-iteration-count
animation-iteration-count controls how many times the animation is played
Property Variable Name
animation-iteration-countAvailable Values for animation-iteration-count
1|3|5|infinite|initial|inheritExamples Using animation-iteration-count values
Example using animation-iteration-count 1
Example using animation-iteration-count 1
Here is an example using different animation-iteration-count values
Demo Box 1 Content 1
Code
<style>
.demo-box-1 {
position:relative;
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
transition: all 0.3s;
}
.demo-box-1 .dbs-1 {
transition: all 0.3s;
position:absolute;
display:block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
height:100px;
width:100px;
left:10px;
top:10px;
}
.dbs-1 {
transition: all 0.3s;
position:absolute;
animation: my-animation-1;
animation-duration: 5s;
/*
animation-name: my-animation-1;
animation-duration: 5s;
animation-timing-function: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-delay:1s;
*/
animation-iteration-count:1;
}
</style>
<style>
@keyframes my-animation-1 {
0% {
left:0px;
top:0px;
}
25% {
left:400px;
top:0px;
}
50% {
left:400px;
top:100px;
}
75% {
left:0px;
top:100px;
}
100% {
left:0px;
top:0px;
}
}
</style>
<h2>Example using animation-iteration-count 1</h2>
<p>Here is an example using different animation-iteration-count values</p>
<div class='demo-box-1'>
<div class='dbs-1'>Demo Box 1 Content 1</div>
</div>Example using animation-iteration-count 3
Example using animation-iteration-count 3
Here is an example using different animation-iteration-count values
Demo Box 2 Content 1
Code
<style>
.demo-box-2 {
position:relative;
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
transition: all 0.3s;
}
.demo-box-2 .dbs-2 {
transition: all 0.3s;
position:absolute;
display:block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
height:100px;
width:100px;
left:10px;
top:10px;
}
.dbs-2 {
transition: all 0.3s;
position:absolute;
animation: my-animation-2;
animation-duration: 5s;
/*
animation-name: my-animation-2;
animation-duration: 5s;
animation-timing-function: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-delay:1s;
*/
animation-iteration-count:3;
}
</style>
<style>
@keyframes my-animation-2 {
0% {
left:0px;
top:0px;
}
25% {
left:400px;
top:0px;
}
50% {
left:400px;
top:100px;
}
75% {
left:0px;
top:100px;
}
100% {
left:0px;
top:0px;
}
}
</style>
<h2>Example using animation-iteration-count 3</h2>
<p>Here is an example using different animation-iteration-count values</p>
<div class='demo-box-2'>
<div class='dbs-2'>Demo Box 2 Content 1</div>
</div>Example using animation-iteration-count 5
Example using animation-iteration-count 5
Here is an example using different animation-iteration-count values
Demo Box 3 Content 1
Code
<style>
.demo-box-3 {
position:relative;
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
transition: all 0.3s;
}
.demo-box-3 .dbs-3 {
transition: all 0.3s;
position:absolute;
display:block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
height:100px;
width:100px;
left:10px;
top:10px;
}
.dbs-3 {
transition: all 0.3s;
position:absolute;
animation: my-animation-3;
animation-duration: 5s;
/*
animation-name: my-animation-3;
animation-duration: 5s;
animation-timing-function: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-delay:1s;
*/
animation-iteration-count:5;
}
</style>
<style>
@keyframes my-animation-3 {
0% {
left:0px;
top:0px;
}
25% {
left:400px;
top:0px;
}
50% {
left:400px;
top:100px;
}
75% {
left:0px;
top:100px;
}
100% {
left:0px;
top:0px;
}
}
</style>
<h2>Example using animation-iteration-count 5</h2>
<p>Here is an example using different animation-iteration-count values</p>
<div class='demo-box-3'>
<div class='dbs-3'>Demo Box 3 Content 1</div>
</div>Example using animation-iteration-count infinite
Example using animation-iteration-count infinite
Here is an example using different animation-iteration-count values
Demo Box 4 Content 1
Code
<style>
.demo-box-4 {
position:relative;
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
transition: all 0.3s;
}
.demo-box-4 .dbs-4 {
transition: all 0.3s;
position:absolute;
display:block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
height:100px;
width:100px;
left:10px;
top:10px;
}
.dbs-4 {
transition: all 0.3s;
position:absolute;
animation: my-animation-4;
animation-duration: 5s;
/*
animation-name: my-animation-4;
animation-duration: 5s;
animation-timing-function: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-delay:1s;
*/
animation-iteration-count:infinite;
}
</style>
<style>
@keyframes my-animation-4 {
0% {
left:0px;
top:0px;
}
25% {
left:400px;
top:0px;
}
50% {
left:400px;
top:100px;
}
75% {
left:0px;
top:100px;
}
100% {
left:0px;
top:0px;
}
}
</style>
<h2>Example using animation-iteration-count infinite</h2>
<p>Here is an example using different animation-iteration-count values</p>
<div class='demo-box-4'>
<div class='dbs-4'>Demo Box 4 Content 1</div>
</div>Example using animation-iteration-count initial
Example using animation-iteration-count initial
Here is an example using different animation-iteration-count values
Demo Box 5 Content 1
Code
<style>
.demo-box-5 {
position:relative;
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
transition: all 0.3s;
}
.demo-box-5 .dbs-5 {
transition: all 0.3s;
position:absolute;
display:block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
height:100px;
width:100px;
left:10px;
top:10px;
}
.dbs-5 {
transition: all 0.3s;
position:absolute;
animation: my-animation-5;
animation-duration: 5s;
/*
animation-name: my-animation-5;
animation-duration: 5s;
animation-timing-function: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-delay:1s;
*/
animation-iteration-count:initial;
}
</style>
<style>
@keyframes my-animation-5 {
0% {
left:0px;
top:0px;
}
25% {
left:400px;
top:0px;
}
50% {
left:400px;
top:100px;
}
75% {
left:0px;
top:100px;
}
100% {
left:0px;
top:0px;
}
}
</style>
<h2>Example using animation-iteration-count initial</h2>
<p>Here is an example using different animation-iteration-count values</p>
<div class='demo-box-5'>
<div class='dbs-5'>Demo Box 5 Content 1</div>
</div>Example using animation-iteration-count inherit
Example using animation-iteration-count inherit
Here is an example using different animation-iteration-count values
Demo Box 6 Content 1
Code
<style>
.demo-box-6 {
position:relative;
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
transition: all 0.3s;
}
.demo-box-6 .dbs-6 {
transition: all 0.3s;
position:absolute;
display:block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
height:100px;
width:100px;
left:10px;
top:10px;
}
.dbs-6 {
transition: all 0.3s;
position:absolute;
animation: my-animation-6;
animation-duration: 5s;
/*
animation-name: my-animation-6;
animation-duration: 5s;
animation-timing-function: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-delay:1s;
*/
animation-iteration-count:inherit;
}
</style>
<style>
@keyframes my-animation-6 {
0% {
left:0px;
top:0px;
}
25% {
left:400px;
top:0px;
}
50% {
left:400px;
top:100px;
}
75% {
left:0px;
top:100px;
}
100% {
left:0px;
top:0px;
}
}
</style>
<h2>Example using animation-iteration-count inherit</h2>
<p>Here is an example using different animation-iteration-count values</p>
<div class='demo-box-6'>
<div class='dbs-6'>Demo Box 6 Content 1</div>
</div>replied to animation-iteration-count
Hi! I'd gladly buy your traffic on popunder and push format for a +15% top-up to your CPM. Details below: I am Stepan, Publisher Team Lead at AdBison.com ad-network. Yes, deal is simple. For example if you are earning $100 daily - we guarantee you a minimum of $115 daily. ������ 1. We are looking to buy all geo traffic. ������ 2. We can pay daily. You get your payment by request without hold and KYC. We prefer crypto but pay anywhere. ������ 3. Fast and straightforward statistics (updates every 10 min) in your cabinet. Access to limited ads with high CPM/CPA payouts. We grow performance wise. Important detail. We favor YOUR stat. If your stat, like GA, shows more traffic than you see in our cabinet - it's not your problem. We take the risk on us, so you can feel comfy. Are you interested? Then sign up at: https://platform.adbison.com/link/join Or write me directly: Skype - stepan@adbison.com Telegram - @petrov_sn000
2:49 pm, February 16, 2023 animation